import 'package:flutter/material.dart';

// 剪裁（Clip）
class ClipRoute extends StatefulWidget {
  @override
  _ClipRouteState createState() => _ClipRouteState();
}

class _ClipRouteState extends State<ClipRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("裁剪-Clip"),
      ),
      body: _ClipRouteBody(),
    );
  }
}

class _ClipRouteBody extends StatelessWidget {
  final Widget _avatar = Image.network(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
      width: 60.0);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[Text("不裁剪"), _avatar],
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("裁剪为圆形"),
              ClipOval(
                child: _avatar,
              )
            ],
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("裁剪为矩形"),
              ClipRect(
                child: _avatar,
              )
            ],
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("裁剪为圆角矩形"),
              ClipRRect(
                borderRadius: BorderRadius.circular(5.0),
                child: _avatar,
              )
            ],
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                widthFactor: .5, // 宽度设置为原来宽度的一半，另一半会溢出
                child: _avatar,
              ),
              Text(
                "你好世界",
                style: TextStyle(color: Colors.green),
              )
            ],
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRect(
                //将溢出部分裁剪
                child: Align(
                  alignment: Alignment.topLeft,
                  widthFactor: .5, // 宽度设置为原来宽度的一半，另一半会溢出
                  child: _avatar,
                ),
              ),
              Text(
                "你好世界",
                style: TextStyle(color: Colors.green),
              )
            ],
          ),
          SizedBox(height: 10),
          DecoratedBox(
            decoration: BoxDecoration(color: Colors.red),
            child: ClipRect(
              child: _avatar,
              clipper: MyClipper(), //使用自定义的clipper
            ),
          ),
        ],
      ),
    );
  }
}

class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return false;
  }
}
